import React from 'react'
import {
    StyleSheet,
    View,
    Text,
    Image, PixelRatio,
} from 'react-native'
import Ionicons from 'react-native-vector-icons/Ionicons'
import theme from '../../config/theme'

const resultsList: Search.result[] = [
    {
        title: '阳光先生',
        url: 'https://images.hanjutv.com/vod/2017-03-08/58bfd86ad266e.jpg',
        series: 10,
        state: 0
    },
    {
        title: 'Life',
        url: 'https://images.hanjutv.com/vod/2017-03-08/58bfd603d4a31.jpg',
        series: 10,
        state: 1
    },
    {
        title: '虽然30但仍17',
        url: 'https://images.hanjutv.com/2017/1016/20171016121407678.jpg',
        series: 10,
        state: 2
    },
    {
        title: '时间',
        url: 'https://images.hanjutv.com/2017/1016/20171016121407678.jpg',
        series: 10,
        state: 1
    },
    {
        title: '爱情倒后镜',
        url: 'https://1img.hanjutv.com/201911/0c802b7caf.jpg',
        series: 10,
        state: 1
    },
    {
        title: '大君，描绘爱情',
        url: 'https://1img.hanjutv.com/201803/819ca8cf42.jpg',
        series: 10,
        state: 1
    },
    {
        title: '不需要愛情',
        url: 'https://images.hanjutv.com/vod/2017-03-08/58bfd614f1c5b.jpg',
        series: 10,
        state: 1
    }
]

function SearchList() {
    return (
        <View>
            {
                resultsList.map((item, index) => {
                    return (
                        <View key={index} style={styles.resultItem}>
                            <Image
                                style={{
                                    width: 90,
                                    height: 120,
                                    resizeMode: "center"
                                }}
                                source={{uri: item.url}}/>
                            <View style={{marginLeft: 15}}>
                                <Text numberOfLines={1} style={styles.videoTitle}>爱的迫降</Text>
                                <Text style={styles.numDes}>16集 全</Text>
                                <View style={styles.playBox}>
                                    <Ionicons name="play-outline" color={theme.whiteColor} size={16}/>
                                    <Text style={styles.playText}>播放</Text>
                                </View>
                            </View>
                        </View>
                    )
                })
            }

        </View>
    )
}

const styles = StyleSheet.create({
    resultItem: {
        paddingVertical: 10,
        paddingHorizontal: 10,
        display: "flex",
        flexDirection: "row",
        borderBottomWidth: 1 / PixelRatio.get(),
        borderColor: theme.shallowGrey,
        borderStyle: "solid"
    },
    playBox: {
        display: "flex",
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
        width: 100,
        borderRadius: 5,
        paddingVertical: 7,
        backgroundColor: theme.dangerColor,
        color: theme.whiteColor
    },
    videoTitle: {
        fontSize: 16,
        color: theme.mainFontColor,
        marginBottom: 16
    },
    numDes: {
        marginBottom: 10,
        color: theme.deepGrey
    },
    playText: {
        marginLeft: 5,
        color: theme.whiteColor,
        fontSize: 18
    }
})

export default SearchList
